﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="../dhtiny.js"></script>
    <script type="text/javascript" src="swfobject.js"></script>
    
</head>
<body>
    Video ID <input id="videoid" type="text" value="24s5PjG1X2o"/> <button onclick="">Load</button><br />    
    <div id="rootbox" style="position:relative;left:0px;width:300px;height:240px;border: solid 2px green;">
        <div id ="rootvideo"></div>
    </div>    
    
<script type="text/javascript">
    $dh.Require(["util/dragmanager"]);
    $dh.addLoader(function() {
        putVideoTo($dh.getEl("videoid").value, "rootvideo");

        var size = $dh.size($dh.getEl("rootbox"));
        makeParts($dh.getEl("videoid").value, size.width, size.height, 3, 3);

        $dh.disableSelect(document.body);
    });

    function putVideoTo(videoId, divId) {
        var params = { allowScriptAccess: "always", wmode: "opaque", border: 1, color1: "red", color2: "blue" };
        var atts = { "id": divId };
        //swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
        //swfobject.embedSWF("http://www.youtube.com/v/"+videoId+"&enablejsapi=1&playerapiid=player"+divId, divId, "100%", "100%", "8", null, null, params, atts);
        swfobject.embedSWF("http://www.youtube.com/v/" + videoId + "&enablejsapi=1&playerapiid=" + divId, divId, "100%", "100%", "8", null, null, params, atts);
    }

    var videoList, loadedList;
    function makeParts(videoid, width, height, ncol, nrow) {
        var w = Math.floor(width / ncol), h = Math.floor(height / nrow), space = 4;
        var rx = 350, ry = 30;
        videoList = [];
        loadedList = [];

        for (var i = 0; i < nrow; i++)
            for (var j = 0; j < ncol; j++) {
            var div = document.createElement("div");
            var dx = (w + space) * j, dy = (h + space) * i;
            var left = rx + dx, top = ry + dy;
            div.style.cssText = "display:block;position:absolute;top:" + top + "px;left:" + left + "px;width:" + w + "px;height:" + h + "px;overflow:hidden;border: solid 1px red;";
            div.id = "piece_" + i + "_" + j;

            var div2 = div.cloneNode(true);
            div2.style.cssText += ";width:" + width + "px;height:" + height + "px;left:" + (-w * j) + "px;top:" + (-h * i) + "px;z-index:0;overflow:hidden;";

            var player = document.createElement("div");
            player.style.cssText += ";position:absolute;top:0px;left:0px;overflow:hidden;";
            player.id = "player_" + i + "_" + j;
            videoList.push(player.id);

            var mask = div.cloneNode(true);
            mask.id = "mask_" + i + "_" + j;
            mask.style.cssText += ";z-index:999;cursor:move;";
            $dh.css(mask, { bg: "blue", opac: 20 });

            document.body.appendChild(div);
            div.appendChild(div2);
            document.body.appendChild(mask);

            div2.appendChild(player);
            putVideoTo(videoid, player.id);

            setupDrag(mask, div);
        }
    }

    function setupDrag(mask, div) {
        mask.canDrag = true;
        DHDRAG.setDrag(mask, { mode: "MOVE", noMask: true, ghostDrag: false });
        DHDRAG.addEv("ondragging", function(sender, ev) {
            var pieceID = "piece_" + sender.activeObj.id.substr(5);
            var div = document.getElementById(pieceID);
            div.style.left = sender.activeObj.style.left;
            div.style.top = sender.activeObj.style.top;
        });
    }

    function seekStep() {
        for (var x = 0; x < loadedList.length; x++) {
            var player = document.getElementById(loadedList[x]);
            player.seekTo(window.currentStep * 10, true);
            player.stopVideo();
        }
        setTimeout("seekStep", 5000);
    }

    YTU = {
        updateHTML: function(elmId, value) {
            document.getElementById(elmId).innerHTML = value;
        },

        setPlayerState: function(newState) {
            //this.updateHTML("playerstate", newState);
        },

        onPlayerReady: function(playerId) {
            for (var i = 0; i < videoList.length; i++)
                if (videoList[i] == playerId) {
                loadedList.push(videoList[i]);
                videoList.splice(i, 1);
                break;
            }

            if (videoList.length == 0) {
                window.currentStep = 0;
                seekStep();
            }
            /*player = document.getElementById(playerId);
            //setInterval(this.updateytplayerInfo, 250);
            //this.updateytplayerInfo();      
            player.addEventListener("onStateChange", this.onPlayerStateChange);
            player.addEventListener("onError", this.onPlayerError);            */
        },

        onPlayerError: function(errorCode) {
            alert("An error occured: " + errorCode);
        },

        onPlayerStateChange: function(newState) {
            this.setPlayerState(newState);
        },

        updatePlayerInfo: function() {
            this.updateHTML("bytesloaded", this.getBytesLoaded());
            this.updateHTML("bytestotal", this.getBytesTotal());
            this.updateHTML("videoduration", this.getDuration());
            this.updateHTML("videotime", this.getCurrentTime());
            this.updateHTML("startbytes", this.getStartBytes());
            this.updateHTML("volume", this.getVolume());
        },

        // functions for the api calls
        loadNewVideo: function(player, id, startSeconds) {
            player.loadVideoById(id, parseInt(startSeconds));
        },

        cueNewVideo: function(player, id, startSeconds) {
            player.cueVideoById(id, startSeconds);
        },

        play: function(player) {
            player.playVideo();
        },

        pause: function(player) {
            player.pauseVideo();
        },

        stop: function(player) {
            player.stopVideo();
        },

        getPlayerState: function(player) {
            return player.getPlayerState();
        },

        seekTo: function(player, seconds) {
            player.seekTo(seconds, true);
        },

        getBytesLoaded: function(player) {
            return player.getVideoBytesLoaded();
        },

        getBytesTotal: function(player) {
            return player.getVideoBytesTotal();
        },

        getCurrentTime: function(player) {
            return player.getCurrentTime();
        },

        getDuration: function(player) {
            return player.getDuration();
        },

        getStartBytes: function(player) {
            return player.getVideoStartBytes();
        },

        mute: function(player) {
            player.mute();
        },

        unMute: function(player) {
            player.unMute();
        },

        getEmbedCode: function(player) {
            return player.getVideoEmbedCode();
        },

        getVideoUrl: function(player) {
            return player.getVideoUrl();
        },

        setVolume: function(player, newVolume) {
            player.setVolume(newVolume);
        },

        getVolume: function(player) {
            return player.getVolume();
        },

        clearVideo: function(player) {
            ytplayer.clearVideo();
        }
    };

    window.onYouTubePlayerReady = YTU.onPlayerReady;

</script>

</body>
</html>
